<template>
    <div class="home">
        <el-link class="link" icon="el-icon-download" type="primary" @click="save">下载图片</el-link>
        <div id="tui-image-editor" class="drawing-container"></div>
    </div>
</template>
<script>
    import "tui-image-editor/dist/tui-image-editor.css";
    import "tui-color-picker/dist/tui-color-picker.css";
    import ImageEditor from "tui-image-editor";

    import {
        base64ToFile,
        fileLocalDownLoad,
        // rafThrottle,
    } from "@/plugins/file-util";

    export default {
        data() {
            return {
                instance: null,
                url: "",
                pName: "",
            };
        },
        mounted() {
            this.init();
        },
        created() {
            this.getPhoto();
        },
        methods: {
            init() {
                const locale_zh = {
                    ZoomIn: "放大",
                    ZoomOut: "缩小",
                    Hand: "手掌",
                    History: "历史",
                    Resize: "调整宽高",
                    Crop: "裁剪",
                    DeleteAll: "全部删除",
                    Delete: "删除",
                    Undo: "撤销",
                    Redo: "反撤销",
                    Reset: "重置",
                    Flip: "镜像",
                    Rotate: "旋转",
                    Draw: "画",
                    Shape: "形状标注",
                    Icon: "图标标注",
                    Text: "文字标注",
                    Mask: "遮罩",
                    Filter: "滤镜",
                    Bold: "加粗",
                    Italic: "斜体",
                    Underline: "下划线",
                    Left: "左对齐",
                    Center: "居中",
                    Right: "右对齐",
                    Color: "颜色",
                    "Text size": "字体大小",
                    Custom: "自定义",
                    Square: "正方形",
                    Apply: "应用",
                    Cancel: "取消",
                    "Flip X": "X 轴",
                    "Flip Y": "Y 轴",
                    Range: "区间",
                    Stroke: "描边",
                    Fill: "填充",
                    Circle: "圆",
                    Triangle: "三角",
                    Rectangle: "矩形",
                    Free: "曲线",
                    Straight: "直线",
                    Arrow: "箭头",
                    "Arrow-2": "箭头2",
                    "Arrow-3": "箭头3",
                    "Star-1": "星星1",
                    "Star-2": "星星2",
                    Polygon: "多边形",
                    Location: "定位",
                    Heart: "心形",
                    Bubble: "气泡",
                    "Custom icon": "自定义图标",
                    "Load Mask Image": "加载蒙层图片",
                    Grayscale: "灰度",
                    Blur: "模糊",
                    Sharpen: "锐化",
                    Emboss: "浮雕",
                    "Remove White": "除去白色",
                    Distance: "距离",
                    Brightness: "亮度",
                    Noise: "噪音",
                    "Color Filter": "彩色滤镜",
                    Sepia: "棕色",
                    Sepia2: "棕色2",
                    Invert: "负片",
                    Pixelate: "像素化",
                    Threshold: "阈值",
                    Tint: "色调",
                    Multiply: "正片叠底",
                    Blend: "混合色",
                    Width: "宽度",
                    Height: "高度",
                    "Lock Aspect Ratio": "锁定宽高比例",
                };
                const customTheme = {
                    "common.bi.image":
                        "http://rxk4fakas.hn-bkt.clouddn.com/9974c829530b49289339672ac727f63b.png", // 左上角logo图片
                    "common.bisize.width": "110px",
                    "common.bisize.height": "80px",
                    "common.backgroundImage": "",
                    "common.backgroundColor": "",
                    "common.border": "1px solid #333",

                    // header
                    "header.backgroundImage": "none",
                    "header.backgroundColor": "#607d8b00",
                    "header.bisize.height": "50px",
                    "header.border": "50px",

                    // load button
                    "loadButton.backgroundColor": "#fff",
                    "loadButton.border": "1px solid #ddd",
                    "loadButton.color": "#222",
                    "loadButton.fontFamily": "NotoSans, sans-serif",
                    "loadButton.fontSize": "12px",
                    "loadButton.display": "none", // 隐藏

                    // download button
                    "downloadButton.backgroundColor": "#1ec9ef",
                    "downloadButton.border": "1px #fdba3b",
                    "downloadButton.color": "#fff",
                    "downloadButton.fontFamily": "NotoSans, sans-serif",
                    "downloadButton.fontSize": "10px",
                    "downloadButton.display": "none", // 隐藏

                    // icons default
                    "menu.normalIcon.color": "#8a8a8a",
                    "menu.activeIcon.color": "#555555",
                    "menu.disabledIcon.color": "#ccc",
                    "menu.hoverIcon.color": "#e9e9e9",
                    "submenu.normalIcon.color": "#8a8a8a",
                    "submenu.activeIcon.color": "#e9e9e9",

                    "menu.iconSize.width": "20px",
                    "menu.iconSize.height": "20px",
                    "submenu.iconSize.width": "20px",
                    "submenu.iconSize.height": "20px",

                    // submenu primary color
                    "submenu.backgroundColor": "#4d559eeb",
                    "submenu.partition.color": "#858585",

                    // submenu labels
                    "submenu.normalLabel.color": "#858585",
                    "submenu.normalLabel.fontWeight": "lighter",
                    "submenu.activeLabel.color": "#fff",
                    "submenu.activeLabel.fontWeight": "lighter",

                    // checkbox style
                    "checkbox.border": "1px solid #ccc",
                    "checkbox.backgroundColor": "#fff",

                    // rango style
                    "range.pointer.color": "#fff",
                    "range.bar.color": "#666",
                    "range.subbar.color": "#d1d1d1",

                    "range.disabledPointer.color": "#414141",
                    "range.disabledBar.color": "#282828",
                    "range.disabledSubbar.color": "#414141",

                    "range.value.color": "#fff",
                    "range.value.fontWeight": "lighter",
                    "range.value.fontSize": "11px",
                    "range.value.border": "1px solid #353535",
                    "range.value.backgroundColor": "#151515",
                    "range.title.color": "#fff",
                    "range.title.fontWeight": "lighter",

                    // colorpicker style
                    "colorpicker.button.border": "1px  #1e1e1e",
                    "colorpicker.title.color": "#fff",
                };
                this.instance = new ImageEditor(
                    document.querySelector("#tui-image-editor"),
                    {
                        usageStatistics: false,
                        includeUI: {
                            loadImage: {
                                path: this.url,
                                name: this.pName,
                            },
                            initMenu: "draw", // 默认打开的菜单项
                            menuBarPosition: "left", // 菜单所在的位置
                            locale: locale_zh, // 本地化语言为中文
                            theme: customTheme, // 自定义样式
                        },
                        cssMaxWidth: 1000, // canvas 最大宽度
                        cssMaxHeight: 410, // canvas 最大高度
                    }
                );
                document.getElementsByClassName("tui-image-editor-main")[0].style.top =
                    "0px"; // 图片距顶部工具栏的距离
                document.getElementsByClassName(
                    "tui-image-editor-controls"
                )[0].style.backgroundColor = "#324157 ";
                /* 对一些不需要的按钮进行样式隐藏*/
                document.querySelector('[tooltip-content="删除"]').style.display = "none";
                document.querySelector(
                    ".tui-image-editor-container .tui-image-editor-help-menu.right"
                ).style.height = "140px";
            },
            getPhoto() {
                this.url = this.$route.params.url;
                this.pName = this.$route.params.pName;
            },
            save() {
                // blob 转换成 File 对象
                // let blob = base64ToFile(this.instance.toDataURL(), "图片");
                // let file = new window.File([blob], blob.name, { type: blob.type });
                // let form = new FormData();
                // form.append("file", file);
                // console.log(file);
                // let data = form.get("file");
                // console.log(data);
                // const reader = new FileReader();
                // reader.readAsDataURL(file);
                // console.log(reader.result)
                // reader.onload = () => {
                //   this.showBtn = false;
                //   this.showProgress = true;
                //   this.$axios
                //     .post("photo/upload", {
                //       file: data,
                //       // uId: window.sessionStorage.getItem("uId")
                //     })
                //     .then((res) => {
                //       console.log(res.data);
                //       if (res.data.code === 0) {
                //         console.log("成功");
                //       }
                //     })
                //     .catch((err) => {
                //       console.log(err);
                //     });
                // };
                const base64String = this.instance.toDataURL();
                const file = base64ToFile(base64String, this.pName);
                fileLocalDownLoad(file, this.pName);
            },
        },
    };
</script>

<style lang="less" scoped>
    .home{
        background-color: #607d8b00;
        width: 100%;
        height: 450px;
        border-radius: 10px;
        .link{
            float:right;
        }
        .drawing-container {
            background-color: #607d8b00;
            width: 100%;
            height: 90%;
            border-radius: 10px;
        }}
</style>
